<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="用户ID" prop="userId" width="100"/>
      <!-- <el-table-column align="center" label="用户昵称" prop="name" /> -->
      <el-table-column align="center" label="预警" width="100">
        <template slot-scope="scope">
          <el-tag type="danger">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="预警原因" prop="warningWhy" />
      <el-table-column align="center" label="预警次数" prop="warningCount" />
      <el-table-column align="center" label="未处理天数" prop="noHandlerDay" />
      <el-table-column align="center" label="治理" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="toDetail(scope.row.userId)">详情</el-button>
          <el-button size="mini" @click="changeStatus(scope.row.userId)">处理措施</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" align="center" @pagination="fetchData" />
    <el-dialog :visible.sync="centerDialogVisible" title="预警详情" width="80%" top="10vh">
      <el-table v-loading="detail.listLoading" :data="detail.list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="用户ID" prop="userId" />
        <el-table-column align="center" label="日期">
          <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="预警原因">
          <template slot-scope="scope">{{ scope.row.warningWhy }}</template>
        </el-table-column>
        <el-table-column align="center" label="处理状态" prop="dealtStateValue" />
        <el-table-column align="center" label="处理描述" prop="dealtDesc" />
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="处理措施">
      <el-form size="medium">
        <el-form-item label="请选择：">
          <el-select v-model="value" placeholder="请选择：">
            <el-option label="禁止3天登录" value="1" />
            <el-option label="冻结账号" value="2" />
            <el-option label="回收奖励" value="3" />
            <el-option label="忽略" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="value=='3'" label="回收数量（DLB）：">
          <el-input v-model="inputNumber" placeholder="请填写回收数量" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dealBtn()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWarningList, getWarningListDetails, WarningHandler } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
export default {
  name: 'Unusual',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        size: 15
      },
      centerDialogVisible: false,
      curId: '',
      dialogFormVisible: false,
      value: '1',
      inputNumber: 0,
      detail: {
        list: null,
        listLoading: true
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getWarningList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    fetchDataDetail(id) {
      this.detail.listLoading = true
      getWarningListDetails({ userId: id }).then(response => {
        this.detail.list = response.data
        setTimeout(() => {
          this.detail.listLoading = false
        }, 300)
      })
    },
    toDetail(id) {
      this.centerDialogVisible = true
      this.fetchDataDetail(id)
    },
    changeStatus(id) {
      this.value = '1'
      this.dialogFormVisible = true
      this.curId = id
    },
    dealBtn(id) {
      WarningHandler({
        userId: this.curId,
        dealtType: this.value,
        dlbNumber: this.inputNumber
      }).then(response => {
        if (response.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listQuery.page = 1
          this.fetchData()
        } else {
          this.$message.error('操作失败请重试')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.imgs{
  width:100px;
  height:100px;
  display:inline-block;
  margin: 0 10px;
  border:1px solid #eee;
}
.img{
  width:100px;
  height:100px;
  display:inline-block;
  cursor: pointer;
}
.curScaleImg{
  width:auto;
  max-width:100%;
  height:500px;
}
</style>
